<template>
  <f7-page>
    <f7-views tabs>
      <!--
        Tabbar for switching views-tabs. Should be a first child in Views.
        Additional "toolbar-bottom-md" class is also required here for MD theme
      -->
      <f7-toolbar tabbar labels bottom-md>
        <f7-link  icon-f7="home" text="Tab 1" tab-link="#view-home" tab-link-active></f7-link>
        <f7-link icon-f7="info" text="Tab 2" tab-link="#view-catalog"></f7-link>
        <f7-link icon-f7="info" text="Tab 3" tab-link="#view-settings"></f7-link>
      </f7-toolbar>
      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <f7-view id="view-home" main tab tab-active url="/tab1/">
      </f7-view>
      <!-- Catalog View -->
      <f7-view id="view-catalog" tab url="/tab2/">
      </f7-view>
      <!-- Settings View -->
      <f7-view id="view-settings" tab url="/tab3/">
      </f7-view>
    </f7-views>
  </f7-page>
</template>
<script>

  export default {
    computed: {
      isiOS () {
        return this.$theme.ios
      },
      isMaterial () {
        return this.$theme.material
      }
    },
    methods: {
      handleClick () {
        console.log('handleClick', this)
      }
    }
  }
</script>
